<template>
  <div>
    <!-- 头部 -->
    <Header />
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <!-- {{category}} -->
        <div class="ctitle">{{category.name}}</div>
        <div class="inner_content">
          <!-- {{categoryList}} -->
          <!-- 左侧表格 -->
          <div class="articleList">
            <!-- 文章列表 -->
            <!-- v-if表示if语句 当 categoryList.total（每页的条数）大于0的时候则对其展示-->
            <ul v-if="categoryList.total>0">
              <li class="list_list" v-for="item in categoryList.list" :key="item.id"  >
                <div class="atitle" @click="toContent(item.id)">{{item.title}}
                  <img src="../assets/resource/img/new.gif" alt="">
                </div>
                <div class="instructions">
                  <!-- 展示发表时间和次数 -->
                  <!-- fmtDate时间过滤器，将时间戳转为正常的时间 -->
                  <span>{{item.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{item.readTimes}}</span>
                </div>
              </li>
            </ul>
            <div class="nodata" v-else>
              暂无数据！
            </div>
            <!-- 文章列表结束 -->
            <div class="page">
              <!-- 分页组件 -->
              <!-- hide-on single-page当页面只有一页的时候隐藏分页 -->
              <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
                :page-size="categoryList.pageSize" :total="categoryList.total" hide-on-single-page>
              </el-pagination>
            </div>
          </div>
          <!-- 右侧的小栏目的展示 -->
          <div class="rank">
            <div class="new">
              最新
            </div>
            <div class="text">
              <ul>
                <li class="list_list" v-for="item in categoryList.list" :key="item.id">
                  <!-- 获得时间 -->
                  <div class="time">{{item.publishTime | fmtDate}}</div>
                  <!-- 获得文章的title -->
                  <div class="text_content" @click="toContent(item)">{{item.title}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer />
    <!-- /底部 -->
  </div>
</template>
<script>
  import {
    get
  } from "../utils/request"
  import Header from "../components/Header.vue"
  import Footer from "../components/Footer.vue"
  export default {
    //局部注册
    //注册组件
    components: {
      Header,
      Footer
    },
    data() {
      return {
        category: {},
        params: {
          page: 1,
          pageSize: 5
        },
        categoryList: {
          list: []
        }
      }
    },
    //监听器
    watch: {
      '$route.query': {
        // handler中存放需要监听的属性
        handler(query) {
          // 参数发生变化进行重新赋值
          this.category = query;
          // 赋值之后在重新加载
          this.loadArticle();
        },
        deep: true
      }
    },
    created() {
      //先拿数据，再去渲染
      //route路由  router路由器
      this.category = this.$route.query;
      this.loadArticle();
    },
    methods: {
      // 给分页按钮绑定事件
      handleCurrentChange(page) {
        // alert(page);  //2
        this.params.page = page; //2
        this.loadArticle();
      },
      //加载文章标题
      loadArticle() {
        let url = "/index/article/pageQuery";
        //传第三个参数
        this.params.categoryId = this.category.id
        get(url, this.params).then(res => {
          this.categoryList = res.data;
        })
      },
      //根据点击的标题名字跳转到文章页面 文章详情页
      toContent(id){
        this.$router.push({
          path:'/article',
          query:{id}
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    padding: 2em .5em;
    background: url(../assets/resource/img/bg.jpg) no-repeat ;;

    &>.wrapper {
      .inner_content {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        &>div {
          background-color: #fff;
          height: 500px;
          border-radius: 5px;
          padding: 1em .5em;
        }

        .articleList {
          flex: 1;
          margin-right: 3em;
          line-height: 4em;
          padding: 0 2em 0 2em;

          //文章标题的样式
          .atitle {
            color: #434343;
            font-size: 18px;
            margin-top: 1em;
            cursor: pointer;
          }

          //时间戳和浏览量的样式
          span {
            font-size: 16px;
          }

          //页面中没有内容时的样式
          .nodata {
            color: rgb(202, 35, 35);
            text-align: center;
            padding: 1em .5em;
          }

          //分页的样式
          .page {
            text-align: center;
            padding: 1em .5em;
          }

          ul>li.list_list {
            border-bottom: 1px solid #ededed;

            &>div {
              line-height: 2em;
              // padding:1em .5em;
            }
          }
        }

        // 右边小模块的样式
        .rank {
          flex-basis: 300px;
          position: relative;
          box-sizing: border-box;

          // 最新的绿色方块的样式
          .new {
            position: absolute;
            background-color: #8f000b;
            color: #fff;
            font-size: 18px;
            width: 75px;
            height: 45px;
            text-align: center;
            line-height: 45px;
            top: -15px;
            left: -2px;
            box-shadow: 3px 3px 5px 3px #ec989f;
          }

          .text {
            box-sizing: border-box;
            position: absolute;
            top: 30px;
            padding: 1.5em;

            ul {
              &>li {
                display: flex;
                justify-content: space-between;

                .time {
                  color: #8f000b;
                  line-height: 4em;
                  height: 4em;
                }

                .text_content {
                  box-sizing: border-box;
                  width: 200px;
                  color: #434343;
                  height: 4em;
                  line-height:4em;
                  padding: 0 10px;
                  border-bottom: 1px solid #ededed;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  cursor: pointer;
                }
              }
            }
          }
        }

      }
    }

    .ctitle {
      font-size: 30px;
      font-weight: bold;
      color: #8f000b;
      padding: 1em .5em;
    }
  }
</style>